import React from 'react';
import { Dialog, Form, Input, Button } from '@alifd/next';
import { t } from '@lingui/macro';
import DrawerFooter from '@/components/DrawerFooter';

const ArtificialDialog = ({ modal, setModal, onSubmit, onCancel }) => {
  const { show, record } = modal;

  const handleOnchange = (values) => {
    setModal({ ...modal, record: { ...record, ...values } });
  };

  const handleOnSubmit = async () => {
    Dialog.confirm({
      content: t`积分一但修改，价格不会根据积分变化而变化！`,
      onOk: () => {
        onSubmit?.();
        handleOnCancel?.();
      },
    });
  };

  const handleOnCancel = () => {
    onCancel?.();
  };
  return (
    <>
      <Dialog
        v2
        title={t`编辑积分`}
        visible={show === 'artificial'}
        footer={null}
        width={360}
        closeMode={['esc', 'mask', 'close']}
        onClose={handleOnCancel}
      >
        <Form value={record || {}} inline useLabelForErrorMessage onChange={handleOnchange}>
          <Form.Item name="issueOrderPoint" label={t`积分`} required format="number">
            <Input style={{ width: 240 }} />
          </Form.Item>
          <DrawerFooter>
            <Form.Item>
              <Form.Submit validate type="primary" onClick={handleOnSubmit}>{t`保存`}</Form.Submit>
              <Button style={{ marginLeft: 8 }} onClick={handleOnCancel}>{t`取消`}</Button>
            </Form.Item>
          </DrawerFooter>
        </Form>
      </Dialog>
    </>
  );
};

export default ArtificialDialog;
